<template>
	<div class="detailBox">
		<!-- <img class="updatesimg" src="@/assets/UPDATES.png" /> -->
    <div class="headerBox">
      <p class="title">国债期货数据周报</p>
      <div class="tagtime">
        <div class="tag">农产品</div><span class="time">2025年06月26日｜08:19:08</span>
      </div>
    </div>
		<div class="boxs">
			<div class="containerbox">
				<div class="clip">
					<div class="shade1"></div>
					<div class="shade2">
						<div></div>
						<img class="shade3" src="@/assets/xgj.png" />
					</div>
				</div>
				<el-button class="btn" color="#1356FF">登录查看更多内容</el-button>
			</div>
			<div class="contentbox">
				<div class="left">
          <p class="tag">★ 国债期货本周策略关注：</p>
          <p class="content">基差与跨期方面，期债基差方面，本周期债基差窄幅波动，IRR整体高位小幅下行，跨期价差为主。基差与跨期方面，2509合约跨期价差当前处于历史同期偏低位置，近季合约仍具备正套空间给予跨期一定下行压力，但幅度与确定性或相对前序历史合约有所不及。利率择时与套保信号方面:利率择时信号维持看震荡，其中宏观因子与生产因子信号为看空、价格与库存因子看多。套保品种选择推荐两年期国债期货。
期货择时策略方面，多因子择时择时策略信号多因子择时策略信号偏多，主要看多的因子有基差因子、高频因子等。期货跨品种套利策略方面，国债期货跨品种套利策略TS-T最新信号偏空，T-TL最新信号偏空。信用债中性策略方面，基于远季合约的国债期货对冲压力指数延续反弹，当前信用债久期轮动加对冲策略现券降久期持有1-3年指数并进行国债期货对冲。</p>
          </div>
				<div class="right">
          <p class="tag">本文作者</p>
          <div class="cards" v-for="(item,index) in issuers" :key="index">
            <img src="@/assets/kpbj.png">
            <div class="namebox">
              <div class="name">{{ item.name }}</div>
              <div class="num">从业资格号：{{ item.cyzgh }} &nbsp;&nbsp; | &nbsp;&nbsp; 投资咨询号：{{ item.tzzxh }}</div>
            </div>
            <div class="listbox">
              <div v-for="(item2,index2) in item.list" :key="index2">
                {{ item2.label }}
              </div>
            </div>
            
          </div>
        </div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
	data: [],
})
const issuers = ref([
  {
    name: '王心彤',
    img: '123',
    cyzgh: 'F03107631',
    tzzxh: 'Z08978766',
    list: [
      {
        label: '玉米',
        id: 1
      },
      {
        label: '橡胶',
        id: 2
      },
    ]
  }
])
</script>

<style lang="less" scoped>
.detailBox {
	border-radius: 20px;
	padding: 252px 32px 19px;
	background-image: url('@/assets/zbxq.png');
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: top end;
	background-color: #fff;
	position: relative;
	.updatesimg {
		position: absolute;
    width: 809px;
		top: 24px;
		left: 32px;
	}
}
.boxs {
	position: relative;
}
.contentbox {
	position: relative;
	padding: 30px 32px 300px;
  display: flex;
  .tag {
    font-size: 16px;
    font-weight: 600;
    color: #0F142C;
    margin-bottom: 10px;
  }
  .content {
    font-size: 14px;
    color: @color-636976;
    margin-bottom: 30px;
  }
  .left {
    padding-right: 1.875rem;
    flex: 1;
    .filebox {
      display: flex;
      align-items: center;
      position: relative;
      background: #f9f9f9;
      border-radius: 4px;
      padding: 10px 15px;
      .img1{
        width: 20px;
      }
      .title {
        color: #293366;
        font-size: 14px;
      }
      .img2 {
        position: absolute;
        right: 20px;
        width: 20px;
      }
    }
  }
  .right {
    width: 30%;
    position: relative;
    min-width: 350px;
    .cards {
      margin-bottom: 15px;
      background: #f9f9f9;
      border-radius: 8px;
      padding:20px 20px 20px 70px;
      >img {
        position: absolute;
        left: 10px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      .namebox {
        display: flex;
        margin-bottom: 10px;
        .name {
          font-size: 14px;
          margin-right: 1.5rem;
          padding-top: 0px;
          font-weight: 600;
          width: 70px;
        }
        .num {
          font-size: 12px;
          color: @color-636976;
        }     
      }
    .listbox {
      display: flex;
      flex-wrap: wrap;
      gap: .625rem;
      
      >div {
        background: #F2F6FF;
        border-radius: 3px;
        color: #1356FF;
        font-size: 12px;
        padding: 1px 5px;
        border: 1px solid #1356FF;

      }
    }
    }
  }
}
.containerbox {
	position: absolute;
	height: 100%;
	top: 0;
	width: 100%;
	border-radius: 20px;
	.clip {
		width: 100%;
		height: 100%;
		display: flex;
		// background-color: red;
		align-items: end;
	}
}

.shade1 {
	flex: 1;
	height: 100%;
	background-color: #fff;
	border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  
}
.shade2 {
	width: 190px;
	height: 100%;
	padding-top: 55px;
	position: relative;
	> div {
		background-color: #fff;
		border-top-right-radius: 20px;
		width: 100%;
		height: 100%;
  border-bottom-right-radius: 20px;
	}
}
.shade3 {
	position: absolute;
	left: -5px;
	top: 35px;
	// width: 100px;
}
.btn {
	position: absolute;
	top: 0;
	right: 0;
	padding: 19px 32px;
	font-size: 14px;
}
.headerBox {
  position: absolute;
  top: 70px;
  padding: 0 32px;
  .title {
    // width: 60%;
    // min-width: 900px;
    font-size: 26px;
    color: #071667;
    margin-bottom: 50px;
    // width: 90%;
  }
  .tagtime {
    display: flex;
    align-items: center;
    .tag {
      padding: 1px 5px;
      background: #DFE8FE;
      border-radius: 4px;
      color: #5483EE;
      border: 1px solid #5483EE;
      font-size: 12px;
      margin-right: 30px;
    }
    .time {
      font-size: 12px;
      color: #293366;
    }
  }
}

/* 当一行能放下所有元素时，改为两端对齐 */
@media (max-width: 900px) {
  .detailBox {
	border-radius: 20px;
	padding: 252px 32px 19px;
	background-image: url('@/assets/zbxq.png');
	background-repeat: no-repeat;
	background-size: 1920px 936px;
	background-position: top end;
	background-color: #fff;
	position: relative;
	.updatesimg {
		position: absolute;
    width: 80%;
		top: 24px;
		left: 32px;
	}
}
.headerBox {
  position: absolute;
  top: 50px;
  padding: 0 32px;
  .title {
    // width: 60%;
    // min-width: 900px;
    font-size: 24px;
    color: #071667;
    margin-bottom: 20px;
  }
  .tagtime {
    display: flex;
    align-items: center;
    .tag {
      padding: 3px 7px;
      background: #DFE8FE;
      border-radius: 4px;
      color: #5483EE;
      border: 1px solid #5483EE;
      font-size: 12px;
      margin-right: 30px;
    }
    .time {
      font-size: 12px;
color: #293366;
    }
  }
}
}
</style>
